<template>
  <j-modal
    :title="title"
    :width="1100"
    :visible="visible"
    @cancel="onCancel"
    :confirmLoading="confirmLoading"
    :footer="null"
    switchFullscreen
  >
    <div v-if="approvalList.length > 0" class="timeline-item">
      <a-timeline >
        <a-timeline-item
          v-for="(item, index) in approvalList"
          :key="index"
          size="large"
          color="#67C23A"
        >{{ item.createTime }}
          <a-alert
            :message="item.taskNodeName+'： '+item.opName"
            :type="item.style"
            :closable="false"
            show-icon>
            <p slot="description">
              <span>{{ '审批选项：'+item.flagStr }}</span><br/>
              <span>{{ '审批意见：'+item.opinion }}</span>
            </p>
          </a-alert>
        </a-timeline-item>
      </a-timeline>
    </div>
    <div v-else>
      暂无审批记录
    </div>

  </j-modal>
</template>

<script>
  // 审批记录
  import { getAction, postAction } from '@/api/manage'
  import { mixinDevice } from '@/utils/mixin'
  export default {
    name: 'ApprovaStr',
    mixins: [mixinDevice],
    components: {
    },
    data() {
      return {
        title: '审批记录',
        visible: false,
        confirmLoading: false,
        approvalList: [],
        model: {}
      }
    },
    methods: {
       // 获取审批记录
       getApprovalList() {
         let url = '/approval/detail'
         let processInstanceId = this.model.processInstanceId
         getAction(url, { processId: processInstanceId }).then(res => {
           // 审批记录
           this.approvalList = res.result
           console.log('获取审批记录', res)
         })
       },
      openModel(val) {
         this.visible = true
         this.model = val
         this.getApprovalList()
      },
      onCancel() {
        this.visible = false
      }
    }
  }
</script>

<style>
   @import '~@assets/less/common.less';
.ant-modal-body {
    padding: 15px;
}
.timeline-item {
  padding: 10px;
  height: 600px;
  overflow-y: auto;
}
</style>
